import { ComponentPropsWithoutRef, forwardRef } from 'react';

import { type AdvancedButtonVariants, advancedButtonVariantsProps } from './AdvancedButtonVariants';
import { iconMap } from './icons';
import { AdvancedButtonText } from './AdvancedButtonText';
import { AdvancedButtonIcon } from './AdvancedButtonIcon';
import clsx from 'clsx';

export type AdvancedAdditionalButton = {
  icon?: keyof typeof iconMap,
  iconColor?: string,
  iconSize?: number,
  iconRight?: keyof typeof iconMap,
  iconRightColor?: string,
  iconRightSize?: number,
  textColor?: string,
  textSize?: number,
  iconCount?: number,
  iconRightCount?: number,
  iconNewCount?: boolean
  iconRightNewCount?: boolean,
}

export type AdvancedButtonProps = ComponentPropsWithoutRef<'button'> & AdvancedButtonVariants & AdvancedAdditionalButton;

export const AdvancedButton = forwardRef((props: AdvancedButtonProps, ref) => {
  const {
    children,
    size,
    variant,
    accent,
    active,
    className,
    icon,
    iconColor,
    iconSize = 16,
    iconRight,
    iconRightColor,
    iconRightSize = 16,
    textColor,
    textSize,
    iconCount,
    iconRightCount,
    iconNewCount,
    iconRightNewCount,
    ...other
  } = props;

  return (
    //@ts-ignore-next-line
    <button {...other} ref={ref} className={clsx(advancedButtonVariantsProps({ accent, variant, size, className, active }))}>
      <AdvancedButtonIcon icon={icon} iconCount={iconCount} iconNewCount={iconNewCount} iconColor={iconColor} iconSize={iconSize} />
      <AdvancedButtonText text={children} textSize={textSize} textColor={textColor} />
      <AdvancedButtonIcon icon={iconRight} iconCount={iconRightCount} iconNewCount={iconRightNewCount} iconColor={iconRightColor} iconSize={iconRightSize} />
    </button >
  );
});

